<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('统计')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" th:object="${bean}">

        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">月</span>
                        <h5>交易额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="*{totalMoney}">40 886,200</h1>
                        <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div>
                        <small>总交易额</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">月</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="*{totalOrders}">275,800</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新订单</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">月</span>
                        <h5>访客</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins" th:text="*{visitorNum}">106,120</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>
                        <small>新访客</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">最近一个月</span>
                        <h5>活跃用户</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">80,600</h1>
                        <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                        </div>
                        <small>12月</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
<!--                                <button type="button" class="btn btn-xs btn-white ">天</button>-->
<!--                                <button type="button" class="btn btn-xs btn-white active">月</button>-->
                                <span class="btn btn-xs btn-white">月</span>
<!--                                <button type="button" class="btn btn-xs btn-white">年</button>-->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins" th:text="*{ordersList.size}">2,346</h2>
                                        <small>订单总数</small>
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins "  th:text="*{ordersList.size}">4,422</h2>
                                        <small>最近一个月订单</small>
                                        <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins "  th:text="*{totalMoney}">9,180</h2>
                                        <small>最近一个月销售额</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                 </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>用户订单列表</h5>
<!--                        <div class="ibox-tools">-->
<!--                            <a class="collapse-link">-->
<!--                                <i class="fa fa-chevron-up"></i>-->
<!--                            </a>-->
<!--                            <a class="close-link">-->
<!--                                <i class="fa fa-times"></i>-->
<!--                            </a>-->
<!--                        </div>-->
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>日期</th>
                                    <th>名称</th>
                                    <th>用户</th>
                                    <th>金额</th>
                                </tr>
                            </thead>
                            <tbody th:each="bean, Orders : *{ordersList}">
                                <tr>
                                    <td><div th:if="${bean.status} eq 1"><span class="label label-default">进行中...</span></div>
                                        <div th:if="${bean.status} eq 2"><span class="label label-info">已抢单</span></div>
                                        <div th:if="${bean.status} eq 3"><span class="label label-danger">已取消</span></div>
                                        <div th:if="${bean.status} eq 4"><span class="label label-warning">已退单</span></div>
                                        <div th:if="${bean.status} eq 5"><span class="label label-success">已完成</span></div>
                                    </td>
                                    <td><i class="fa fa-clock-o"></i><span th:text="${bean.createTime}"> 11:20 </span></td>
                                    <td th:text="${bean.goodsName}">青衣5858</td>
                                    <td th:text="${bean.userName}">青衣5858</td>
                                    <td class="text-navy"><span th:text="${bean.money}"> 10 </span> ￥</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
         </div>
      </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
    <script src="../static/js/echarts/echarts.min.js" th:src="@{/js/echarts/echarts.min.js}"></script>
    
    <th:block th:include="include :: sparkline-js" />
    <script type="text/javascript">
	    $(document).ready(function () {
            // $(function () {
                $.post("initOrderVO",function (data) {
                    if (data.code !== 0) {
                        alert(data.msg);
                        return;
                    }
                    console.log(data);
                    var list = data.data;
                    var data_tu = new Array();
                    var x_tu = new Array();
                    var y_tu = new Array();
                    for (var i = 0; i < list.length; i++) {
                        var vo = list[i];
                        x_tu.push(vo.time);
                        y_tu.push(vo.money);
                        data_tu.push([vo.timestamp,vo.moneyNum]);
                        // data_tu.push([gd(Number(vo.year), Number(vo.year), Number(vo.year)), vo.money]);
                    }
                    var myChart = echarts.init(document.getElementById('flot-dashboard-chart'));
                    option = {
                        xAxis: {
                            type: 'category',
                            data: x_tu
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data:y_tu ,
                                type: 'line'
                            }
                        ]
                    };
                    myChart.setOption(option);
                });
        });
    </script>
</body>
</html>
